<template>
    <div :class="{ sticky: isSticky }">
        <van-tabs
            v-model="active"
            @click="onClick"
            color="#ff5f16"
            title-active-color="#ff5f16"
            title-inactive-color="#000"
            line-width="60px"
            line-height="1.5px"
        >
            <van-tab title="正在热映"></van-tab>
            <van-tab title="即将上映"></van-tab>
        </van-tabs>
    </div>
</template>

<script>
// 引入vant需要的组件并注册
import Vue from "vue";
import { Tab, Tabs } from "vant";
Vue.use(Tab);
Vue.use(Tabs);
export default {
    data() {
        return {
            // 默认选中的值
            active: 0,
            url: ["/films/nowPlaying", "/films/comingSoon"],
            // 默认是否吸顶
            isSticky: false,
        };
    },
    // created里纠正因为页面刷新而导致的索引归零的情况
    created() {
        let path = this.$route.path;
        let index = this.url.indexOf(path);
        this.active = index > -1 ? index : 0;
    },
    methods: {
        /**
         * index：当前tab页的索引（也可能是name值）
         * title：title标签名
         */
        onClick(index, title) {
            // 编程式导航
            this.$router.push(this.url[index]);
        },
    },
    // 挂载完毕后获取滚动条的高度
    mounted() {
        // 监听滚动事件以实时获取滚动条高度
        addEventListener("scroll", () => {
            let scrollTop = document.documentElement.scrollTop;
            if (scrollTop >= 200) {
                // 固定顶部导航
                this.isSticky = true;
            } else {
                // 不固定顶部导航
                this.isSticky = false;
            }
        });
    },
};
</script>

<style scoped>
/* 顶部吸顶的样式 */
.sticky {
    position: fixed;
    z-index: 999;
    width: 100%;
}
</style>
